/*
 *@description: 实名认证
 *@Author:@reynold
 *@Date:2025-03-22 11:03:15
 *@Update:2025-03-22 11:03:15
 *@Version: V1.0.0
*/
<template>
  <Card>
    <div>
      <div class="header">
        <div class="header_box">
          <el-date-picker
            v-model="timeValue"
            size="mini"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="header_box">
          <el-select v-model="statusValue" size="mini" placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="header_box">
          <el-input v-model="input" size="mini" placeholder="申请人编号"></el-input>
        </div>
        <div class="header_box">
          <el-button class="btn1" size="mini" @click="search">查询</el-button>
        </div>
      </div>
      <div class="content">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column type="index" :index="initIndex()" label="序号" width="100"></el-table-column>
          <el-table-column
            prop="appNum"
            label="申请人编号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="apptime"
            label="申请时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="idNumber"
            label="身份证号"
            width="180">
          </el-table-column>
          <el-table-column
            label="身份证正面">
            <template slot-scope="scope">
              <img :src="scope.row.idCardForword" />
            </template>
          </el-table-column>
          <el-table-column
            label="身份证反面">
            <template slot-scope="scope">
              <img :src="scope.row.idCardback" />
            </template>
          </el-table-column>
          <el-table-column
            prop="bankNum"
            label="银行卡号">
          </el-table-column>
          <el-table-column
            label="银行卡">
            <template slot-scope="scope">
              <img :src="scope.row.bankCard" />
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status=='通过'" type="success" size="mini" effect="dark">{{scope.row.status}}</el-tag>
              <el-tag v-else-if="scope.row.status=='不通过'" type="danger" size="mini" effect="dark">{{scope.row.status}}</el-tag>
              <el-tag v-else type="info" size="mini" effect="dark">{{scope.row.status}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.status == '未审核'">
                <el-button class="columnBtn1" type="text" size="small" @click="pass(scope.row)">通过</el-button>
                <el-button class="columnBtn2" type="text" size="small" @click="notPass(scope.row)">不通过</el-button>
              </div>
              <div v-else>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageQuery.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card/index.vue'
import instance from '@/utils/instance.js'
import utils from '@/utils/utils.js'
export default {
  data(){
    return{
      timeValue:[],
      statusValue:'',
      options:[
        {
          value: '通过',
          label: '通过'
        }, 
        {
          value: '不通过',
          label: '不通过'
        },
        {
          value: '未审核',
          label: '未审核'
        }
      ],
      input:'',
      tableData:[],
      pageQuery:{
        pageNum:1,
        pageSize:10
      },
      total:100,
    }
  },
  methods:{
    // 初始序号
    initIndex(){
      return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + 1
    },

    // 请求实名认证数据
    getData(){
      instance.post('/certification/list',this.pageQuery).then(res=>{
        this.tableData = res.data.data
        this.total = res.data.total
      })
    },
    // 按条件查找数据
    search(){
      console.log('按条件查数据');
    },
    // 通过审核
    pass(scope){
      instance.post('/certification/pass',scope.id).then(res=>{
        this.getData()
        utils.showSuccess(res.data.message)
      })
    },
    // 不通过审核
    notPass(scope){
      instance.post('/certification/notpass',scope.id).then(res=>{
        this.getData()
        utils.showSuccess(res.data.message)
      })
    },

    handleSizeChange(val) {
      this.pageQuery.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val
      this.getData()
    }
  },
  created(){
    this.getData()
  },
  components:{
    Card
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  .header_box {
    margin-right: 10px;
    .el-button--mini{
      color: #fff;
      background-color: #188b8f;
      border: none;
    }
  }
}
.content {
  .columnBtn1{
    color: #188b8f;
  }
  .columnBtn2{
    color: #ff6464;
  }
}
</style>